<!-- 全景视频页面 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="css/Normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <title>森茉文化传媒</title>
</head>
<style>
  @media (min-width:750px) {
    html {
      background-color: rgba(238, 238, 238, 1);
    }
    .img-list {
      margin: 0 18rem 0 18rem;
      margin-left: 19%;
      -moz-column-count: 3;
      /* Firefox */
      -webkit-column-count: 3;
      /* Safari 和 Chrome */
      column-count: 3;
    }
    .picture-item {
      position: relative;
      margin-top: 1.5rem;
    }
    .picture-item-title {
      display: none;
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      position: absolute;
      bottom: 0;
      text-align: center;
      background: rgba(26, 26, 26, .5);
      font-family: SourceHanSansSC-Regular, Arial, "Microsoft Yahei";
      color: rgba(255, 255, 255, 1);
    }
  }

  @media (max-width:750px) {
    .picture-item-title,
    .header {
      display: none !important;
    }
  }
</style>

<body>
  <header class='header'>
  </header>
  <header class="detail-header">
    <div class="detail-back">
      <img class="icon-back" src="./images/ic_back.png" alt="">
    </div>
    <div class="detail-title color255 bold">全景照片</div>
    <div></div>
  </header>
  <div class="detail-container">
    <div class="img-list">
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="./js/BaseJs.js"></script>

  <script>
    $('.header').append(BaseJs.htmlHeader);
    BaseJs.isIE();
    BaseJs.calRem();
    BaseJs.navActive(4);
    BaseJs.searchBtnHover();

    var isGetData = true;
    getMore(1);
    var indexPage = 1;

    function getMore(page) {
      var url = BaseJs.api + 'media?type=2&page=' + page;
      BaseJs.getData(url, function (item) {
        var ndHtml = '';
        if (item.length > 0 && item != null) {
          for (var i = 0; i < item.length; i++) {
            var title = item[i].title;
            var url = item[i].url;
            var cover = item[i].cover;
            ndHtml += '<div class="picture-item"><a href="./vr-picture-detail.html?id=' + item[i].id +
              '"><img class="width100" src=' +
              item[i].cover +
              '><div class="picture-item-title">' + title + '</div></a></div>'
          }
          $('.img-list').append(ndHtml);
          $('.picture-item').hover(function () {
            $(this).find('.picture-item-title').css("display", "block");
          }, function () {
            $(this).find('.picture-item-title').css('display', 'none');
          })
        } else {
          isGetData = false;
        }
      })
    }

    $(window).bind("scroll", function () {
      if ($(document).scrollTop() + $(window).height() > $(document).height() - 10) {
        if (isGetData) {
          indexPage++;
          getMore(indexPage);
        } else {
          console.log('没有数据了');
        }
      }
    })

    $('.detail-back').click(function () {
      BaseJs.goBack();
    })

    $('#search-btn').click(function (e) {
      BaseJs.searchEvent(e);
    })
  </script>
</body>

</html>